.historyTimeLine,.forecastTimeLine {
  .timeLine-vue-slider {
    background-color: #1c1c1c;
    color           : white;
  }

  .custom-step {
    width           : 6px;
    height          : 6px;
    border-radius   : 0;
    background-color: #ffffff;
    transform       : rotateZ(45deg);
    top             : -4px;
    left            : -5px;
    position        : relative;
    border          : 3px #9295a2 solid;
    box-shadow      : 0 0 5px #ffffff;

    &.active {
      border: 3px #2298ca solid;
    }
  }

  .custom-step-line {
    width           : 1px;
    height          : 7px;
    border-radius   : 0;
    background-color: #ffffff;
    top             : -2px;
    position        : relative;
  }

  .custom-dot {
    width           : 6px;
    height          : 6px;
    border-radius   : 0;
    background-color: #ffffff;
    transform       : rotateZ(45deg);
    margin-top      : 10%;
    border          : 3px #eb8f23 solid;
    box-shadow      : 0 0 10px #ffffff;
  }

  .custom-label {
    padding   : 2px 4px;
    position  : absolute;
    top       : 3px;
    margin-top: 18px;

    left             : 50%;
    -webkit-transform: translateX(-50%);
    transform        : translateX(-50%);

    &.HasDay {
      background-color: #2298ca87;
      border-radius   : 4px;
    }
  }

  .dayRiDiv {
    color      : #2298ca;
    position   : absolute;
    top        : -27px;
    left       : -1em;
    width      : 33px;
    font-size  : 12px;
    font-weight: bold;
    font-style : oblique;
  }

  .custom-tooltip {
    width   : 10em;
    position: relative;
    top     : 6px;
    padding : 2px 2px 3px 22px;

    &:after {
      width     : 0;
      height    : 0;
      content   : ' ';
      top       : 0px;
      position  : absolute;
      border-top: 21px solid #eb8f2360;
    }

    &:before {
      width       : 0;
      height      : 36px;
      content     : ' ';
      top         : -4px;
      position    : absolute;
      border-right: 3px solid #eb8f23;
      transform   : rotate(326deg);
    }
  }
}